<template>
  <div class="member-pay-wrapper">
    <div class="member-pay-list">
      <div class="member-pay-title">今天的学习是明天收获的基础！</div>
      <div class="check-title">请选择充值金额：</div>
      <div class="pay-types-list">
        <div class="pay-types-item"><img src="/static/image/member_pay/one.png" alt=""></div>
        <div class="pay-types-item"><img src="/static/image/member_pay/third.png" alt=""></div>
        <div class="pay-types-item"><img src="/static/image/member_pay/six.png" alt=""></div>
        <div class="pay-types-item"><img src="/static/image/member_pay/year.png" alt=""></div>
      </div>
      <div class="checked-item">
          <div>已选择365元/12个月套餐</div>
          <div>共计：<span class="total-money">¥ 365.00</span></div>
      </div>
      <div class="fixed-bottom" @click="toMemberPayDetails">
        <span>立即付款</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "memberPay",
    methods: {
      toMemberPayDetails () {
        this.$router.push({
          path:'/pages/memberPayDetails/memberPayDetails'
        })
      }
    }
  };
</script>

<style scoped lang="less">
  .member-pay-title {
    font-size:32rpx;
    color:#333;
    font-weight:bold;
    background-color:#fff;
    padding:30rpx 26rpx 26rpx 26rpx;
  }
  .check-title {
    color:#333;
    font-size:28rpx;
    background-color:#fff;
    padding:0rpx 26rpx 26rpx 26rpx;
  }
  .pay-types-list {
    overflow:hidden;
    width:100%;
    background-color:#fff;
  }
  .pay-types-item {
    width:50%;
    height:406rpx;
    float:left;
    text-align:center;
    & > img {
      width:313rpx;
      height:406rpx;
    }
  }
  .checked-item {
    width:100%;
    box-sizing:border-box;
    padding:37rpx 26rpx;
    background-color:#fff;
    display:flex;
    justify-content: space-between;
    align-items:center;
    position:fixed;
    bottom:98rpx;
    right:0
  }

  .total-money {
    color:#FF5050;
    font-size:32rpx;
    font-weight:bold;
  }


  .fixed-bottom {
    width:100%;
    height:98rpx;
    line-height:98rpx;
    text-align:center;
    color:#fff;
    background-color:#2B80FF;
    font-size:32rpx;
    position:fixed;
    left:0;
    bottom:0;
  }
</style>
